<template>
	<view>
		<view>
			<uni-section :title="className" type="line" style="margin-left: 40rpx;"></uni-section>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" @getIndex="tap" :chartData="chartData" />
			</view>
			<view class="dateBox">
				<view style="font-weight: 600;">{{single}}</view>
				<view style="font-weight: 600;">星期{{getweekday(single)}}</view>
			</view>
			<view style="margin-top: 40rpx;display: flex;justify-content: space-around;" class="">
				<view style="width: 36%;">
					<view
						style="text-align: center;border-bottom: 2rpx solid red;padding-bottom: 25rpx; font-size: 16rpx;">
						迟到详情/{{personList["迟到"].length}}人</view>
					<view style="margin-top: 30rpx;" class="">
						<span v-for='(item,index) in personList["迟到"]' :key="index"
							style="padding:0 5rpx; font-size: 22rpx;">{{item + "  "}}</span>
					</view>
				</view>
				<view style="width: 36%;">
					<view
						style="text-align: center;border-bottom: 2rpx solid red;padding-bottom: 25rpx; font-size: 16rpx;">
						请假详情/{{personList["请假"].length}}人</view>
					<view style="margin-top: 30rpx;">
						<span v-for='(item,index) in personList["请假"]' :key="index"
							style="padding:0 5rpx; font-size: 22rpx;">{{item + "  "}}</span>
					</view>
				</view>
			</view>


			<view style="margin-top: 40rpx;display: flex;justify-content: space-around;" class="">
				<view style="width: 36%;">
					<view
						style="text-align: center;border-bottom: 2rpx solid red;padding-bottom: 25rpx; font-size: 16rpx;">
						正常详情/{{personList["正常"].length}}人</view>
					<view style="margin-top: 30rpx;" class="">
						<span v-for='(item,index) in personList["正常"]' :key="index"
							style="padding:0 5rpx; font-size: 22rpx;">{{item + "  "}}</span>
					</view>
				</view>
				<view style="width: 36%;">
					<view
						style="text-align: center;border-bottom: 2rpx solid red;padding-bottom: 25rpx; font-size: 16rpx;">
						未打卡详情/{{personList["未打卡"].length}}人</view>
					<view style="margin-top: 30rpx;">
						<span v-for='(item,index) in personList["未打卡"]' :key="index"
							style="padding:0 5rpx; font-size: 22rpx;">{{item + "  "}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tacherClass from "@/api/modules/teachClass.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				timeSlotList: [],
				uploadTime: "",
				time: "",
				classId: "",
				className: "",
				topName: "考勤详情",
				userName: "",
				opts: {
					color: ["#578f53", "#b94a3e", "#fa8e44"],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled: true,
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				chartData: {
					categories: ["上午", "中午", "晚上"],
					series: [{
							name: "迟到",
							data: [35, 36, 31]
						},
						{
							name: "请假",
							data: [18, 27, 21]
						},
						{
							name: "正常打卡",
							data: [18, 27, 21]
						}
					]
				},
				personList: [],
				timeName: "", // 索引对应的文字
				nweDataTime: "", // 选择柱状图时的上午下午晚上
				nowDay: "", // 当天日期
				weekDate: "", // 星期几
				upDateTime: "",
			}
		},
		methods: {
			getweekday(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()];
				return week;

			},
			// 切换时辰
			tap(e) {
				this.chartData.categories.forEach((item, index) => {
					if (index == e.currentIndex.index) {
						this.timeName = item
					}
				})
				this.timeSlotList.forEach(item => {
					if (this.timeName == item.dictLabel) {
						this.nweDataTime = item.dictValue
					}
				})
				tacherClass.getClassAttenceStuByCondition({
					classId: this.classId,
					accessDate: this.single,
					timeSlot: this.nweDataTime,
				}).then(result => {
					this.personList = result.data
					console.log(this.personList)
				})
			},
			// 获取上下午晚上对应得数据
			getDateValue() {
				tacherClass.getDictByType("time_slot").then(res => {
					this.timeSlotList = res.data
					res.data.forEach(item => {
						if (this.time == item.dictLabel) {
							this.uploadTime = item.dictValue
						}
					})
					tacherClass.getClassAttenceStuByCondition({
						classId: this.classId,
						accessDate: this.single,
						timeSlot: this.uploadTime,
					}).then(result => {
						this.personList = result.data
						console.log(this.personList)
						console.log('this.this.personList')
					})
				})
			},
			// 拿到星期几
			getWeek() {
				switch (new Date().getDay()) {
					case 1:
						this.weekDate = "星期一"
						break;
					case 2:
						this.weekDate = "星期二"
						break;
					case 3:
						this.weekDate = "星期三"
						break;
					case 4:
						this.weekDate = "星期四"
						break;
					case 5:
						this.weekDate = "星期五"
						break;
					case 6:
						this.weekDate = "星期六"
						break;
					case 0:
						this.weekDate = "星期日"
						break;
				}
			},

		},
		onLoad(options) {
			console.log(options)
			this.single = options.single
			this.userName = uni.getStorageSync("userName")
			this.className = options.className
			this.classId = options.classId
			this.chartData = JSON.parse(options.chartData)
			this.time = options.time
			this.upDateTime = parseTime(Date.now()).slice(0, 10)
			this.getDateValue()
			this.nowDay = parseTime(Date.now()).slice(0, 10).replaceAll("-", "/")
			this.getWeek()
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;
	}

	.charts-box {
		width: 90%;
		height: 500rpx;
		margin: 10rpx auto;
	}

	/deep/.uni-section .uni-section-header__decoration[data-v-f7ca1098] {
		background-color: #90d1cb;
	}

	/deep/.uni-section .uni-section-header__content[data-v-f7ca1098] {
		margin-left: 20rpx;
	}

	.dateBox {
		display: flex;
		justify-content: space-around;
		padding: 0 200rpx;
	}
</style>